<template>
  <el-dialog
    :title="title"
    v-model="model"
    width="500px"
    :before-close="closeHandle"
  >
    <el-form ref="formRef" :model="form" :rules="rules" label-width="100px">
      <el-form-item label="物品名称" prop="name">
        <el-input v-model="form.name" placeholder="请输入物品名称" />
      </el-form-item>
      <el-form-item label="物品图片" prop="images">
        <UploadImage
          :limit="1"
          :fileList="fileList"
          @fileChange="handleImageChange"
        />
      </el-form-item>
      <el-form-item label="数量" prop="quantity">
        <el-input-number v-model="form.quantity" :min="1" />
      </el-form-item>
      <el-form-item label="剩余数量" prop="remainingQuantity">
        <el-input-number
          v-model="form.remainingQuantity"
          :min="0"
          :max="form.quantity"
        />
      </el-form-item>
      <el-form-item label="状态" prop="status">
        <el-radio-group v-model="form.status">
          <el-radio :label="0">待上架</el-radio>
          <el-radio :label="1">上架</el-radio>
        </el-radio-group>
      </el-form-item>
    </el-form>

    <template #footer>
      <div>
        <el-button @click="closeHandle">取 消</el-button>
        <el-button type="primary" @click="submitForm">确 定</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref, onMounted, reactive, computed } from "vue";
import { ElMessage } from "element-plus";
import { saveRentGoods, updateRentGoods } from "@/api/operateManage";
import UploadImage from "@/components/upload/image";

const props = defineProps({
  title: {
    type: String,
    default: "",
  },
  row: {
    type: Object,
    default: () => ({}),
  },
});

const formRef = ref();
const isEdit = computed(() => !!props.row.id);

const emit = defineEmits(["submit"]);
const model = defineModel({
  default: false,
});

const form = ref({
  name: "",
  images: "",
  quantity: 0,
  remainingQuantity: 0,
  status: 0,
});
const fileList = ref([]);

const rules = reactive({
  name: [{ required: true, message: "请输入物品名称" }],
  images: [{ required: true, message: "请上传物品图片" }],
  quantity: [{ required: true, message: "请输入数量" }],
  status: [{ required: true, message: "请选择状态" }],
});

onMounted(() => {
  if (isEdit.value) {
    form.value = { ...props.row };
    fileList.value = [
      {
        name: props.row.images,
        url: props.row.images,
        status: "success",
        uid: props.row.id,
      },
    ];
  }
});

const closeHandle = () => {
  model.value = false;
};

const handleImageChange = (files) => {
  form.value.images = files[0].url;
};

const submitForm = () => {
  formRef.value.validate((valid) => {
    if (valid) {
      const params = { ...form.value };
      if (isEdit.value) {
        params.id = props.row.id;
      }

      const api = isEdit.value ? updateRentGoods : saveRentGoods;
      api(params).then(() => {
        ElMessage({
          message: isEdit.value ? "编辑成功" : "添加成功",
          type: "success",
        });
        closeHandle();
        emit("submit", form.value);
      });
    }
  });
};
</script>

<style scoped>
.el-input,
.el-input-number {
  width: 100%;
}
</style>
